<template>
	<view class="partner" >
		<view class="partner-item" :style="{background:`linear-gradient(to bottom,${findBg[getTagIndex(index)]},#FFFFFF)`}" @click.stop="onDetail(item.id)" v-for="(item,index) in list" :key="index">
			<view class="partner-item-header" >
				<u-avatar mode="aspectFill" @click.native.stop="onOther(item)" :src="item.avatar"></u-avatar>
				<view class="partner-item-header-attr">
					<view class="partner-item-header-attr-name">
						{{item.name}}
						<image class="originator-tag" src="" mode="widthFix"></image>
					</view>
					<view class="partner-item-header-attr-sub">
						{{item.date}} {{item.location}}
					</view>
				</view>
				<view class="partner-item-header-btn" @click.stop="handleSignUp(item)">
					<image v-if="item.status === '报名中'" class="signup-button-img" src="@/static/index/zdz/icon_qbm.png" mode="aspectFit"></image>
					<image v-else-if="item.status === '已满员'" class="full-button-img" src="@/static/index/zdz/icon_ymy.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="partner-item-body">
				<view class="partner-item-body-left">
					<view class="partner-item-content">
						<image class="content-icon" :src="item.titleIcon || '@/static/index/zdz/icon_time.png'" mode="widthFix"></image>
						<text class="content-text">{{item.title}}</text>
					</view>
					<view class="partner-item-people">
						<view class="signed-up-avatars">
							<u-avatar
								v-for="(avatarUrl, avatarIndex) in item.signedUpAvatars&&item.signedUpAvatars.slice(0, 3)"
								:key="avatarIndex"
								:src="avatarUrl"
								size="24"
								customStyle="margin-right: -20rpx; border: 1px solid #fff;"
							></u-avatar>
							<view v-if="item.signedUpAvatars&&item.signedUpAvatars.length > 3" class="more-avatars">...</view>
						</view>
						<text class="signed-up-count">{{item.signedUpCount}}人已报名</text>
					</view>
				</view>
				<view class="partner-item-image-container">
					<u-image :src="item.contentImage" width="140rpx" height="140rpx" radius="20rpx" mode="aspectFill"></u-image>
				</view>
			</view>
			
		</view>

		<view class="partner-actions-fixed">
			<image class="action-button-img find-partner-btn" src="@/static/index/zdz/icon_wyyzdz.png" mode="heightFix" @click="findMyPartner"></image>
			<image class="action-button-img my-partner-btn" src="@/static/index/zdz/icon_wddz.png" mode="heightFix" @click="myPartners"></image>
		</view>
		<u-empty v-if="list.length==0" mode="data" text="暂无搭子信息" style="padding-top:100rpx;"></u-empty>
	</view>
</template>

<script>
	export default {
		name: "FindPartner",
		props:{
			partnerList:{
				type:Array,
				default:()=>[]
			}
		},
		watch:{
			partnerList(newValue,oldValue){
				this.list = newValue
			},
		},
		data() {
			return {
				findBg: [
					'#FDF9E5','#FAECE1','#E3FFFE','#F6FFC0','#FFDECF','#FFF9D0'
				],
				list: [
					{
						id: 1,
						avatar: '', 
						name: '陌生白',
						date: '04-24',
						location: '淮安',
						status: '报名中', 
						titleIcon: '/static/index/zdz/icon_time.png', 
						title: '5.1淮安骑行徐州, 2日游, 找3-4个小伙伴, 边骑边玩。',
						contentImage: '', 
						signedUpAvatars: [],
						signedUpCount: 3
					},
					{
						id: 2,
						avatar: '',
						name: '王小虎想吃鸡爪',
						date: '04-24',
						location: '上海',
						status: '报名中',
						titleIcon: '/static/index/zdz/icon_time.png',
						title: '5月10日出发 阿勒泰地区',
						contentImage: '',
						signedUpAvatars: [],
						signedUpCount: 2
					},
					{
						id: 3,
						avatar: '',
						name: '我的世界',
						date: '04-24',
						location: '杭州',
						status: '已满员',
						titleIcon: '/static/index/zdz/icon_time.png',
						title: '劳动节淮安2日游 | 西游乐园 野餐 | 男女都可 | 自由行',
						contentImage: '',
						signedUpAvatars: [
						],
						signedUpCount: 5
					}
				]
			}
		},
		created() {
			if (this.partnerList && this.partnerList.length > 0) {
				// this.list = this.partnerList;
			}
		},
		methods: {
			getTagIndex(index) {
				return index % 6
			},
			onOther(item){
				console.log("Navigate to user:", item.name);
			},
			onDetail(id){
				console.log("Navigate to detail:", id);
				uni.navigateTo({
					url: '/pages/index/zdz-detail/zdz-detail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			handleSignUp(item) {
				if (item.status === '报名中') {
					console.log("Sign up for:", item.title);
				}
			},
			findMyPartner() {
				console.log("我也要找搭子 clicked");
			},
			myPartners() {
				console.log("我的搭子 clicked");
			}
		}
	}
</script>

<style lang="scss" scoped>
.partner {
	display: flex;
	flex-direction: column;
	padding: 20rpx;
	background-color: #F8F8F8; 
	min-height: calc(100vh - 100rpx); 
}

.partner-item {
	margin-bottom: 20rpx;
	padding: 20rpx 30rpx;
	background: #FFFFFF; 
	border-radius: 20rpx;
	box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.08);
	&-header {
		display: flex;
		align-items: center;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #F3EDDE;

		.partner-item-header-attr {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;

			&-name {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;

				.originator-tag {
					width: 66rpx; 
					height: 32rpx; 
					margin-left: 10rpx;
				}
			}

			&-sub {
				font-size: 24rpx;
				color: #999999;
			}
		}

		&-btn {
			.signup-button-img {
				width: 120rpx; 
				height: 56rpx; 
			}
			.full-button-img {
				width: 120rpx; 
				height: 56rpx; 
			}
		}
	}

	&-body {
		display: flex;
		justify-content: space-between;
		align-items: flex-start; 
		padding-top: 10rpx;
		&-left{
			height: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
	
	&-content {
		display: flex;
		align-items: flex-start; 
		flex: 1;
		margin-right: 20rpx; 

		.content-icon {
			width: 28rpx; 
			height: 28rpx;
			margin-right: 10rpx;
			margin-top: 6rpx; 
			flex-shrink: 0;
		}

		.content-text {
			font-size: 28rpx;
			color: #333333;
			line-height: 1.5;
            word-break: break-all;
		}
	}
	
	&-image-container {
		flex-shrink: 0; 
		.u-image {
			display: block; 
		}
	}

	&-people {
		display: flex;
		align-items: center;

		.signed-up-avatars {
			display: flex;
			align-items: center;
			.more-avatars {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background-color: #f0f0f0;
				color: #999;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				margin-left: -5rpx;
				z-index: 100;
                border: 1px solid #fff;
			}
		}

		.signed-up-count {
			font-size: 24rpx;
			color: #999999;
			margin-left: 30rpx;
		}
	}
}

.partner-actions-fixed {
	position: fixed;
	bottom: 130rpx; 
	left: 20rpx;
	right: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.action-button-img {
		height: 90rpx; 
	}
	.my-partner-btn{
		height: 100rpx; 
	}
}
</style>